<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-26 09:49:40
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-14 23:07:27
 * @Description: 搜索
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <title>搜索</title>
</head>

<body>
    <header>
        <a id="return" href="javascript:history.back()">
            <!-- <img src="../img/右箭头.png" alt=""> -->
            <i class="fa fa-chevron-left" aria-hidden="true"></i>
        </a>
        搜索
        <p></p>
    </header>

    <form action="./search_result.html">
        <input type="text" id="searchbar" name="keyword" placeholder="请输入商品关键字...">
        <span class="btn" id="search-btn" onclick="deleteHistory()">
            <i class="fa fa-search" aria-hidden="true"></i>
        </span>
    </form>
    <div class="hot-search">
        <div class="title">
            <span>历史记录</span>
            <span id="delete-history-btn">
                <i class="fa fa-trash-o" aria-hidden="true"></i>
            </span>
        </div>
        <ul id="history-list" class="tags-list">
            <!-- 历史记录插入位置 -->
        </ul>
        <div class="title"><span>热门搜索</span></div>
        <ul class="tags-list">
            <li class="tag">羽绒服</li>
            <li class="tag">四件套</li>
            <li class="tag">手表</li>
            <li class="tag">火车</li>
            <li class="tag">飞机</li>
            <li class="tag">大炮</li>
            <li class="tag">羽绒服</li>
            <li class="tag">羽绒服</li>
            <li class="tag">四件套</li>
            <li class="tag">手表</li>
            <li class="tag">火车</li>
            <li class="tag">飞机</li>
            <li class="tag">大炮</li>
            <li class="tag">羽绒服</li>
            <li class="tag">羽绒服</li>
            <li class="tag">四件套</li>
            <li class="tag">手表</li>
            <li class="tag">火车</li>
            <li class="tag">飞机</li>
            <li class="tag">大炮</li>
            <li class="tag">羽绒服</li>
            <li class="tag">羽绒服</li>
            <li class="tag">四件套</li>
            <li class="tag">手表</li>
            <li class="tag">火车</li>
            <li class="tag">飞机</li>
            <li class="tag">大炮</li>
            <li class="tag">羽绒服</li>
        </ul>
    </div>


    <!-- 提示 tip -->
    <span id="tip" class="tip"></span>

</body>

<script>
    let oBtn = document.querySelector('#search-btn')
    let oSearchBar = document.querySelector('#searchbar')
    let oHistoryList = document.querySelector('#history-list')
    let oTip = document.querySelector('#tip')

    let history = []
        // let historyList = Array.from(window.localStorage.getItem('search-history'))
    if (!window.localStorage.getItem('search-history')) {
        console.log("没有记录");
    } else {
        history = JSON.parse(window.localStorage.getItem('search-history'))
        history.forEach((item) => {
            let itemHTML = `  <li onclick="clickTag()" class="tag">${item}</li>`
            oHistoryList.insertAdjacentHTML('beforeend', itemHTML)
        })
        console.log(history);
    }

    /**
     * @description: 搜索按钮点击事件
     * @return {*}
     */
    oBtn.addEventListener('click', () => {
        let value = oSearchBar.value.trim()
        if (value != '') {
            if (history.indexOf(value)) {
                history.splice(history.indexOf(value), 1);
                console.log(history);
            }
            history.unshift(value)
            localStorage.setItem('search-history', JSON.stringify(history))
                // window.location.href = `./search_result.html?keyword=${value}`
        } else {
            openTip('请输入内容');
        }
    })

    /**
     * @description: 点击历史记录的标签进行跳转，并更新历史记录的顺序
     * @return {*}
     */
    function clickTag() {
        let keyword = this.event.target.innerText
        history.splice(history.indexOf(value), 1);
        history.unshift(value)
        localStorage.setItem('search-history', JSON.stringify(history))
        window.location.href = `./search_result.html?keyword=${keyword}`
    }

    /**
     * @description: 删除历史记录
     * @return {*}
     */
    function deleteHistory() {
        event.stopPropagation()
        localStorage.removeItem('search-history')
        while (oHistoryList.firstElementChild) {
            oHistoryList.firstElementChild.remove()
        }
    }
    /**
     * @description: 弹出提示框
     * @return {*}
     * @param {*} text (String) 提示内容
     */
    function openTip(text) {
        oTip.style.display = 'inline-block'
        oTip.innerText = text
        setTimeout(() => {
            oTip.style.display = 'none'
        }, 3000)
    }
</script>
<style>
    form {
        width: 100%;
        padding: 2.4vw 2.67vw;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
    }
    
    form>input {
        width: 80.8vw;
        height: 8.93vw;
        background-color: #f4f8f7;
        border-radius: 2vw;
        border: none;
        text-indent: 3.33vw;
        font-size: 3.47vw;
        color: var(--neutral-8-color);
    }
    
    form .btn {
        width: 10.4vw;
        height: 8.93vw;
        background-color: #c55a5c;
        border-radius: 0.53vw;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 4.13vw;
    }
    
    .hot-search {
        width: 100%;
        padding: 2.4vw 2.67vw;
        font-size: 3.47vw;
        box-sizing: border-box;
        line-height: 3.47vw;
        letter-spacing: 0vw;
        color: #999999;
    }
    
    .hot-search .tags-list {
        margin: 4.67vw 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        gap: 2.67vw;
    }
    
    .hot-search .tags-list .tag {
        cursor: pointer;
        height: 6.4vw;
        padding: 0 3.4vw;
        border-radius: 4.67vw;
        /* border: solid 0.13vw #e4e4e4; */
        font-size: 2.93vw;
        line-height: 6.4vw;
        background-color: var(--brand1-1-color);
        color: var(--neutral-8-color);
    }
    
    .hot-search .title {
        display: flex;
        justify-content: space-between;
        font-size: 4.13vw;
        height: 6vw;
        line-height: 6vw;
    }
    
    .hot-search .title>span {
        color: #000000;
    }
    
    #delete-history-btn {
        padding: 0 3.6vw;
        z-index: 10;
    }
</style>

</html>